<template>
  <div class="container" v-resize="containerResize">
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
    <!--左侧菜单-->
    <van-popup v-model="leftMenuShow" get-container="body" position="left" :style="{ height: '100%', width: '35%'}">
      <div class="left-menu">
        <div class="avatar">
          <van-image
            round
            width="5rem"
            height="5rem"
            fit="cover"
            :src="imageUrl+avatar"
          />
        </div>
        <span>{{ name }}</span>

        <div class="classification">
          <van-cell title="首页" icon="wap-home-o" @click="clickFileType(null,{})"/>
          <van-cell title="收藏" icon="star-o" @click="clickFileType(null,{isFavorite: true})"/>
          <van-cell title="图片" icon="photo-o" @click="clickFileType('image',{isFolder: false})"/>
          <van-cell title="视频" icon="video-o" @click="clickFileType('video',{isFolder: false})"/>
          <van-cell title="音乐" icon="music-o" @click="clickFileType('audio',{isFolder: false})"/>
          <van-cell title="文件传输" icon="upgrade" @click="uploadList"/>
        </div>

        <div class="logout">
          <van-button round type="danger" @click.native="logout">退出登录</van-button>
        </div>
      </div>
    </van-popup>

    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="statistics()"
      @load="searchStatus && searchValue.length>0?searchFile(searchValue,true):getFileList(true)"
    >
      <van-checkbox-group v-model="selectRowData" @change="checkboxChange" ref="checkboxGroup">
        <van-cell-group>
          <van-sticky :offset-top="-1">
            <!-- <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div> -->
            <van-nav-bar
              :style="vanNavBarClass"
              v-if="pathList.length < 2 && !selectStatus"
              title="浏览"
              right-arrow
              @click-right="checkboxAll"
              :right-text="this.selectRowData.length !== this.fileList.length ? '选择' : '取消'"
              @click-left="leftMenu"
              left-arrow>
              <div class="header-button" slot="left">
                <svg
                  class="header-button-icon"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  width="25"
                  height="25"
                >
                  <path
                    d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>
                </svg>
              </div>
            </van-nav-bar>
            <van-nav-bar
              :style="vanNavBarClass"
              v-if="selectStatus"
              :title="selectRowData.length === 0 ? '选择项目' : selectRowData.length+'项'"
              right-arrow
              :left-text="this.selectRowData.length !== this.fileList.length ? '全选' : '取消全选'"
              @click-left="checkboxAll"
              @click-right="cancelSelect"
              right-text="完成"
            >
            </van-nav-bar>
            <van-nav-bar
              :style="vanNavBarClass"
              v-if="pathList.length >= 2 && !selectStatus"
              :title="pathList[pathList.length-1].folder"
              :right-text="this.selectRowData.length !== this.fileList.length ? '选择' : '取消'"
              left-arrow
              @click-right="checkboxAll"
              @click-left="clickBack">
              <div class="header-button" slot="left">
                <van-icon name="arrow-left"/>
              </div>
            </van-nav-bar>
            <div class="searchbar" :style="searchBarClass">
              <van-search
                ref="search"
                v-model="searchValue"
                :show-action="searchStatus"
                shape="round"
                placeholder="搜索"
                @focus="startSearch"
                @search="onSearch"
                @input="onSearch"
              >
                <div slot="action" @click="endSearch">取消</div>
              </van-search>
            </div>
          </van-sticky>

          <!--操作-->
          <van-cell :center="true" style="padding: 0 0 10px 0;">
            <div class="operating-header">
              <van-row>
                <van-col class="operating-header-col" span="4" align="center" type="flex" @click="moreOperations">
                  <van-icon name="more-o"/>
                </van-col>
                <van-col class="operating-header-col" span="16" align="center" @click="showSortSheet">
                  已按{{ actionsSortName }}排序
                  <van-icon class="sortable" :name="'arrow-'+sortOrder"/>
                </van-col>
                <van-col class="operating-header-col" span="4" align="center" @click="changeVmode">
                  <van-icon name="bars"
                            :style="!grid?{background:'#1989fa',color:'#ffffff',padding:'0 5px',borderRadius: '5px'}:{}"/>
                </van-col>
              </van-row>
            </div>
          </van-cell>

          <!--搜索结果-->
          <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length > 0"
                    style="background-color:#f7f8fa;">
            <div class="search-result">{{ resultCount }}个结果</div>
          </van-cell>
          <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length === 0">
            <div class="search-result-no">无结果</div>
          </van-cell>

          <!--空状态-->
          <van-empty v-if="!loading && fileList.length === 0" description="空空如也"/>

          <van-cell v-if="!grid" class="list-item"
                    :style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : ''}" center
                    v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item,index)"
                    :is-link="item.isFolder">
            <div class="list-item-div" @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
              <van-row class="row-file">
                <van-col span="4" align="center" class="list-cell-icon">
                  <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"></icon-file>
                </van-col>
                <van-col span="16" class="list-item-content">
                  <van-col span="24">
                    {{ item.name }}
                  </van-col>
                  <van-col span="24" class="file-description" justify="space-between">
                    <van-col span="24">
                      {{ formatTime(item.agoTime) }}&nbsp;&nbsp;&nbsp;{{ formatSize(item.size) }}
                    </van-col>
                  </van-col>
                </van-col>
                <van-col span="4">

                </van-col>
              </van-row>
            </div>
            <van-checkbox class="file-item-checkbox" v-if="!grid && selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
          </van-cell>

          <van-grid v-if="grid" square :center="true" :column-num="gridColumnNum" :gutter="10" :border="false"
                    :style="{'width':'100%','overflow':'auto'}">
            <van-grid-item class="parent-grid-item" v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
                           @click="fileClick(item,index)">
              <div
                class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
                :style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : '', 'border-radius': '15px'}"
                @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
                <van-checkbox  class="file-item-checkbox" v-if="grid && selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
                <div class="grid-item-icon">
                  <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
                             :grid="true"></icon-file>
                </div>
                <span :title="item.name" class="grid-item-text">{{ item.name }}</span>
              </div>
            </van-grid-item>
          </van-grid>

        </van-cell-group>
      </van-checkbox-group>

    </van-list>
    <!-- </van-pull-refresh> -->

    <!--选择上传文件菜单-->
    <van-action-sheet
      v-model="actionSheetShow"
      :actions="actionsMenus"
      cancel-text="取消"
      @cancel="onCancel"
      @select="selectActionsMenus">
    </van-action-sheet>

    <!--排序菜单-->
    <van-action-sheet
      v-model="actionSortSheetShow"
      :actions="actionsSortMenus"
      cancel-text="取消"
      description="排序方式"
      @cancel="onCancel"
      @select="selectSortActionsMenus">
    </van-action-sheet>

    <van-dialog v-model="showNewFolder" show-cancel-button @confirm="newFolderNameClick">
      <van-field class="new-folder-input" v-model="newFolderName" placeholder="请输入文件夹名称" :border="true"
                 :clearable="true" ref="newFolderInput" :autofocus="true">
      </van-field>
    </van-dialog>

    <van-dialog v-model="showRename" show-cancel-button @confirm="rowRename()">
      <van-field class="rename-input" v-model="renameFileName" placeholder="请输入文件名称" :border="true" :clearable="true"
                 ref="renameInput" :autofocus="true">
      </van-field>
    </van-dialog>

    <e-vue-contextmenu ref="contextShow" class="newFileMenu" @ctx-show="show" @ctx-hide="hide">
      <ul v-for="(item,index) in menus" :key="item.label"
          :class="{'menu-list-first':index===0,'menu-list-last':index===menus.length-1,'menu-list':index<menus.length-1&&index>0}">
        <div v-if="index !== 0" style="border-bottom:1px solid #cccccc85"></div>
        <li :class="{'remove':item.operation==='remove'}" @click="menusOperations(item.operation)">
          <div class="menuitem">
            <svg-icon :icon-class="item.iconClass"/>
            <span class="menuitem text">{{ item.label }}</span>
          </div>
        </li>
      </ul>
    </e-vue-contextmenu>

    <van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick">
      <van-cell v-if="rowContextData.name!=null && !grid" :style="overlayContentClass"
                class="list-item overlay-content-class" center :is-link="rowContextData.isFolder">
        <div>
          <van-row class="row-file">
            <van-col span="4" align="center" class="list-cell-icon">
              <icon-file :item="rowContextData" :image-url="imageUrl"></icon-file>
            </van-col>
            <van-col span="16" class="list-item-content">
              <van-col span="24">
                {{ rowContextData.name }}
              </van-col>
              <van-col span="24" class="file-description" justify="space-between">
                <van-col span="24">
                  {{ formatTime(rowContextData.agoTime) }}&nbsp;&nbsp;&nbsp;{{ formatSize(rowContextData.size) }}
                </van-col>
              </van-col>
            </van-col>
            <van-col span="4"></van-col>
          </van-row>
        </div>
        <van-checkbox class="file-item-checkbox" v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon"
                      :name="rowContextData"></van-checkbox>
      </van-cell>

      <div v-if="rowContextData.name!=null && grid" :style="overlayContentClass"
           class="grid-time overlay-content-class van-grid-item__content van-grid-item__content--center van-grid-item__content--square">
        <van-checkbox class="file-item-checkbox" v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon"
                      :name="rowContextData"></van-checkbox>
        <div class="grid-item-icon">
          <icon-file :item="rowContextData" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
                     :grid="true"></icon-file>
        </div>
        <span :title="rowContextData.name" class="grid-item-text">{{ rowContextData.name }}</span>
      </div>

    </van-overlay>
    <!--为了不受右键区域的影响, 把弹窗之类的提取出来-->
    <sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
    <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
    <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
    <office-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></office-preview>
  </div>
</template>
<script>

import {mapGetters} from 'vuex'
import {formatSize, formatTime} from '@/utils/number'
import {getElementToPageLeft, getElementToPageTop} from '@/utils/dom'
import api from '@/api/file-api'
import IconFile from "../../../components/Icon/IconFile";
import fileConfig from "@/utils/file-config";
import ImageViewer from "@/components/preview/ImageViewer";
import VideoPreview from "@/components/preview/VideoPreview";
import SimTextPreview from "@/components/preview/SimTextPreview";
import {suffix} from "@/utils/file-type";
import OfficePreview from "@/components/preview/OfficePreview";
import Clipboard from "clipboard";

let pinyin = require("pinyin");

export default {
  components: {
    OfficePreview,
    SimTextPreview,
    VideoPreview,
    ImageViewer, IconFile,
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar'
    ])
  },
  data() {
    return {
      test: 0,
      lastTabbarOffsetTop: 0,// 底部tabbar与上边框 上次的距离
      diffTabbarTop: 0,// 底部tabbar与上边框的变化距离
      isiPhoneX: 0,
      imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
      audioCoverUrl: `${process.env.VUE_APP_BASE_API}/view/cover?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
      tabActive: 0,
      path: this.$route.query.path,
      fileList: [],
      pathList: [
        {'folder': '', index: 0},
        {'folder': '+', index: 1}
      ],
      pagination: {
        pageIndex: 0,
        pageSize: 50,
        total: 0,
      },
      queryFileType: null,
      queryCondition: {isFolder: null},
      loading: false,
      finished: false,
      refreshing: false,
      actionSheetShow: false, // 下拉菜单
      actionsMenus: [
        {name: '新建文件夹'},
      ],
      actionSortSheetShow: false,
      actionsSortMenus: [
        {name: '名称'},
        {name: '日期'},
        {name: '大小'},
      ],
      actionsSortName: '名称',
      showNewFolder: false,
      showRename: false,
      newFolderName: '新建文件夹',
      Loop: null,
      isJustHideMenus: false,
      singleMenus: [
        {iconClass: 'menu-select', label: '选择', operation: 'select'},
        {iconClass: 'menu-favorite', label: '收藏', operation: 'favorite'},
        {iconClass: 'menu-rename', label: '重命名', operation: 'rename'},
        {iconClass: 'menu-copy', label: '移动或复制', operation: 'copy'},
        {iconClass: 'menu-download', label: '下载', operation: 'download'},
        {iconClass: 'menu-remove', label: '删除', operation: 'remove'}
      ],
      menus: [],
      rowContextData: {},
      selectRowData: [],
      checkboxGroup: [],
      newFolderLoading: false,
      renameLoading: false,
      renameFileName: '',
      selectIndexList: [],
      selectStatus: false,
      isShowCheckContext: false,
      overlayShow: false,
      overlayContentClass: {},
      vanNavBarClass: {},
      searchBarClass: {},
      leftMenuShow: false,
      searchValue: '',
      searchStatus: true,
      resultCount: 0,
      sortOrder: 'up',
      sortableProp: null,
      order: null,
      grid: false,
      vmode: 'list',
      gridColumnNum: -1,
      imagePreviewRow: {},
      imagePreviewVisible: false,
      videoPreviewRow: {},
      videoPreviewVisible: false,
      officePreviewRow: {},
      officePreviewVisible: false,
      textPreviewVisible: false,
      textPreviewRow: {},
    };
  },
  directives: {
    resize: { // 指令的名称
      bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        let width = '', height = '';

        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value();  // 关键
          }
          width = style.width;
          height = style.height;
        }

        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      }
    }
  },
  mounted() {
    // 加载布局
    if (this.$route.query.vmode) {
      this.vmode = this.$route.query.vmode
      if (this.vmode === 'list') {
        this.grid = false
      } else {
        this.grid = true
      }
    }
    // 加载url上的path
    if (this.$route.query.path !== '/') {
      const path = decodeURI(this.$route.query.path)
      this.pathList.splice(1, 1)
      path.split('/').forEach((pathName, index) => {
        if (index > 0) {
          const item = {}
          item['folder'] = pathName
          item['index'] = index
          this.pathList.push(item)
        }
      })
    }
    if (this.$route.query.folder && this.path) {
      localStorage.setItem(this.path, this.$route.query.folder)
    }
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false);
  },
  methods: {
    // 是否高亮收藏图标
    highlightFavorite(isFavorite, isHover) {
      const item_menu = this.menus.find(item => {
        if (item.operation === 'favorite' || item.operation === 'unFavorite') {
          return item
        }
      })
      if (item_menu) {
        if (isFavorite) {
          item_menu.label = '取消收藏'
          item_menu.iconClass = 'menu-unfavorite-hover'
          item_menu.operation = 'unFavorite'
        } else {
          if (isHover) {
            item_menu.iconClass = 'menu-favorite-hover'
          } else {
            item_menu.iconClass = 'menu-favorite'
          }
          item_menu.label = '收藏'
          item_menu.operation = 'favorite'
        }
        // this.$set(this.menus, 0, item_menu)
      }
    },
    // 显示操作菜单
    show() {
    },
    hide() {
      const that = this
      this.isJustHideMenus = true
      setTimeout(function () {
        that.isJustHideMenus = false
      }, 100)
    },
    showCheckContext() {
      return this.selectIndexList.includes(this.rowContextData.index)
    },
    // 长按事件
    rowContextmenu(row, target, touchClientX) {
      this.menus = JSON.parse(JSON.stringify(this.singleMenus));
      // 改变菜单
      if (this.selectStatus && this.selectIndexList.includes(row.index)) {
        if (this.selectIndexList.includes(row.index)) {
          const item = {iconClass: 'menu-unselect', label: '取消选择', operation: 'unselect'}
          this.menus.splice(0, 1, item)
        }
      } else {
        const item = {iconClass: 'menu-select', label: '选择', operation: 'select'}
        this.menus.splice(0, 1, item)
      }

      if (row.isShare && !row.isPrivacy) {
        // 添加复制下载链接选项
        this.menus.splice(-2, 0, { iconClass: "menu-fuzhi", label: "复制下载链接", operation: "copyDownloadLink" })
      }

      this.preliminaryRowData(row)
      // 长按选择的数据
      const offsetTop = getElementToPageTop(target) - row.scrollY
      const e = {}
      if ((offsetTop + (target.offsetHeight / 2)) > document.body.offsetHeight / 2) {
        e.pageX = touchClientX
        e.pageY = getElementToPageTop(target) - this.menus.length * 47 + 5
      } else {
        e.pageX = touchClientX
        e.pageY = getElementToPageTop(target) + target.offsetHeight + 5
      }
      this.$refs.contextShow.showMenu(e)
    },
    // 选择某行预备数据
    preliminaryRowData(row) {
      this.rowContextData = row
      this.isShowCheckContext = this.selectIndexList.includes(row.index)
      const isFavorite = this.rowContextData.isFavorite
      this.highlightFavorite(isFavorite, false)
    },
    // 菜单操作
    menusOperations(operation) {
      const that = this
      switch (operation) {
        case 'favorite':
          this.favoriteOperating(true)
          break
        case 'open':
          this.fileClick(this.rowContextData, this.rowContextData.index)
          break
        case 'unselect':
          const index = this.rowContextData.index
          this.$refs.checkboxes[index].toggle();
          break
        case 'unFavorite':
          this.favoriteOperating(false)
          break
        case 'select':
          this.selectStatus = true
          this.selectIndexList.push(this.rowContextData.index)
          setTimeout(() => {
            this.$refs.checkboxes[that.rowContextData.index].toggle()
          }, 0)
          break
        case 'rename':
          this.renameFileName = this.rowContextData.name
          this.showRename = true
          setTimeout(function () {
            that.$refs.renameInput.focus()
          }, 0)
          break
        case 'copy':
          vant.Toast('暂不支持移动');
          break
        case 'download':
          this.downloadFile()
          break
        case "copyDownloadLink":
          // 复制下载链接
          this.copyDownloadLink(this.rowContextData)
          break;
        case 'remove':
          this.deleteFile()
          break
      }
      this.overlayShow = false
      document.documentElement.style.overflow = null;
      this.$refs.contextShow.hideMenu()
    },
    // 重命名
    rowRename() {
      const row = this.rowContextData
      let newFileName = this.renameFileName
      if (newFileName) {
        if (!row.isFolder) {
          const ext = '.' + row.suffix
          if (!newFileName.endsWith(ext)) {
            newFileName += ext
          }
        }
        this.renameLoading = true
        const findIndex = this.fileList.findIndex(item => {
          if (newFileName === item.name) {
            return item;
          }
        })
        if (findIndex > -1) {
          let msg = '该文件已存在'
          if (row.isFolder) {
            msg = '该文件夹已存在'
          }
          this.$message({
            message: msg,
            type: 'warning'
          });
          this.renameLoading = false
          return
        }

        api.rename({
          newFileName: encodeURI(newFileName),
          username: this.$store.state.user.name,
          folder: this.$route.query.folder,
          id: row.id
        }).then(() => {
          this.renameLoading = false
          row.name = newFileName
          this.fileList[row.index] = row
          this.editingIndex = -1
        })
      } else {
        this.editingIndex = -1
      }
    },
    downloadFile() {
      let totalSize = 0
      if (this.selectRowData.length > 0) {
        this.selectRowData.forEach(item => {
          totalSize += item.size
        })
      } else {
        totalSize += this.rowContextData.size
      }
      if (totalSize > 0) {
        let fileIds = [];
        if (this.selectRowData.length > 0) {
          this.selectRowData.forEach(value => {
            fileIds.push(value.id)
          })
        } else {
          fileIds.push(this.rowContextData.id)
        }
        if (fileIds.length > 1 || this.rowContextData.isFolder) {
          fileConfig.packageDownload(fileIds, this.$store.state.user.token, this.$store.state.user.name)
          return
        }
        fileConfig.download(this.$store.state.user.name, this.rowContextData, this.$store.state.user.token)
      } else {
        this.$message({
          message: '所选文件夹为空',
          type: 'warning'
        });
      }
    },
    // 复制下载链接
    copyDownloadLink(row) {
      let url = window.location.origin + fileConfig.previewUrl(this.$store.getters.name, row, undefined, undefined)
      let clipboard = new Clipboard('.newFileMenu', {
        text: function () {
          return url
        }
      })
      clipboard.on('success', e => {
        this.$message({message: '复制成功', type: 'success', duration: 1000});
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({message: '该浏览器不支持自动复制', type: 'warning', duration: 1000});
        clipboard.destroy()
      })
    },
    // 收藏/取消收藏
    favoriteOperating(isFavorite) {
      this.rowContextData.isFavorite = isFavorite
      this.highlightFavorite(isFavorite, true)
      api.favoriteUrl({
        fileIds: this.rowContextData.id,
        isFavorite: isFavorite
      }).then(res => {
      })
    },
    // 删除
    deleteFile() {
      let fileList = []
      const fileIds = []
      if (this.selectRowData.length > 0) {
        fileList = this.selectRowData
        this.selectRowData.forEach(value => {
          fileIds.push(value.id)
        })
      } else {
        fileList = this.selectRowData
        fileIds.push(this.rowContextData.id)
      }
      const str = this.getShowSumFileAndFolder(fileList)

      vant.Dialog.confirm({
        title: '提示',
        message: '此操作将永久删除' + str + ', 是否继续?'
      }).then(() => {
        api.delete({
          currentDirectory: this.rowContextData.path,
          username: this.$store.state.user.name,
          fileIds: fileIds
        }).then(() => {
          // 刷新列表
          this.getFileList()
          vant.Toast.setDefaultOptions({duration: 800});
          vant.Toast.success('删除成功');
          if (this.selectRowData.length > 1) {
            this.selectRowData = []
          }
        })
      })
    },
    touchMove() {
      // // 避免和长按事件冲突
      clearTimeout(this.Loop);
      // e.preventDefault();
    },
    touchStart(item) {
      // e.preventDefault();
      // Toast.setDefaultOptions({ duration: 500 });
      //手指触摸
      clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
      const e = window.event
      this.Loop = setTimeout(() => {
        item.scrollY = e.targetTouches[0].pageY - e.targetTouches[0].clientY
        if (this.findListItem(item, e.targetTouches[0].target, e.targetTouches[0].clientX)) {
          this.overlayShow = true
          document.documentElement.style.overflow = 'hidden';
        }
      }, 500);
    },
    touchEnd() {
      //手指离开
      clearTimeout(this.Loop);
    },
    // 点击遮罩层
    overlayClick() {
      this.overlayShow = false
      document.documentElement.style.overflow = null;
    },
    findListItem(item, target, touchClientX) {
      if (target === null) {
        return false
      }
      const offsetParent = target.offsetParent
      const parentElement = target.parentElement
      if (!offsetParent && parentElement || offsetParent === null) {
        return this.findListItem(item, target.parentElement, touchClientX)
      } else {
        if (offsetParent.className.indexOf('list-item') > -1) {
          // list
          this.longPressDisplayLayer(item, offsetParent, touchClientX)
        } else if (offsetParent.className.indexOf('grid-time') > -1) {
          // grid
          this.longPressDisplayLayer(item, offsetParent, touchClientX)
        } else {
          return this.findListItem(item, target.offsetParent, touchClientX)
        }
      }
      return true
    },
    // 长按显示层
    longPressDisplayLayer(item, offsetParent, touchClientX) {
      const background = this.selectIndexList.includes(this.rowContextData.index) ? '#90c2fcb5' : ''
      this.overlayContentClass = {
        'top': (getElementToPageTop(offsetParent) - item.scrollY) + 'px',
        'height': offsetParent.offsetHeight + 'px',
        'width': offsetParent.offsetWidth + 'px',
        'left': getElementToPageLeft(offsetParent) + 'px',
        'border-radius': '0px',
        'background': background
      }
      setTimeout(() => {
        this.overlayContentClass = {
          'top': (getElementToPageTop(offsetParent) - item.scrollY) + 'px',
          'height': offsetParent.offsetHeight + 'px',
          'width': (offsetParent.offsetWidth - (this.grid ? 0 : 10)) + 'px',
          'left': (getElementToPageLeft(offsetParent) + (this.grid ? 0 : 5)) + 'px',
          'border-radius': '20px',
          'background': background
        }
      }, 0)
      this.rowContextmenu(item, offsetParent, touchClientX)
    },
    // 浏览器的返回事件
    goBack() {
      if (this.pathList.length <= 1) {
        this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURI(this.path)}`)
        return
      }
      this.clickBack()
    },
    // 点击返回按钮(标题), 返回上一级
    clickBack() {
      this.handleLink(this.pathList[this.pathList.length - 2], this.pathList.length - 2)
    },
    //菜单键
    leftMenu() {
      this.leftMenuShow = true
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    startSearch() {
      // this.searchStatus = true
      this.vanNavBarClass = {
        visibility: 'hidden'
      }
      this.searchBarClass = {
        marginTop: '-30px'
      }
      let searchAction = document.querySelector('.van-search__action')
      searchAction.style.marginRight = '0px'
      searchAction.style.visibility = 'visible'
      searchAction.style.color = '#1989fa'
    },
    endSearch() {
      const that = this
      setTimeout(function () {
        that.vanNavBarClass = {
          visibility: 'visible'
        }
      }, 150)
      this.searchBarClass = {
        marginTop: '0px'
      }
      let searchAction = document.querySelector('.van-search__action')
      searchAction.style.marginRight = '-44px'
      searchAction.style.visibility = 'hidden'
      this.searchValue = ''
      this.getFileList()
    },
    onSearch() {
      if (this.searchValue.length < 1) {
        this.getFileList()
      } else {
        this.searchFile(this.searchValue)
      }
    },
    // 切换布局
    changeVmode() {
      this.grid = !this.grid
      this.vmode = 'list'
      if (this.grid) {
        this.vmode = 'grid'
      }
      if (!this.path) {
        this.path = ''
      }
      this.$router.push(`?vmode=${this.vmode}&path=${this.path}${this.$route.query.folder ? '&folder='+this.$route.query.folder : ''}`)
    },
    showSortSheet() {
      this.actionSortSheetShow = true
    },
    // 更多操作
    moreOperations() {
      // Toast("提示").setDefaultOptions({ duration: 200 });
      this.actionSheetShow = true
      this.actionsMenus = [
        {name: '新建文件夹'},
      ]
      if (window.uploader.support) {
        const menuItem = {}
        menuItem['name'] = '上传文件'
        this.actionsMenus.push(menuItem)
      }
      if (window.uploader.supportDirectory) {
        const menuItem = {}
        menuItem['name'] = '上传文件夹'
        this.actionsMenus.push(menuItem)
      }
    },
    handleLink(item, index, unPushLink, unRefresh) {
      if (item && item.search) {
        if (item.searchKey) {
          this.searchFileByKeyWord(item.searchKey)
        } else if (item.row) {
          this.searchFileAndOpenDir(item.row)
        }
        this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
      } else {
        this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
        this.pathList.forEach((p, number) => {
          if (number === 0) {
            this.path = ''
          } else if (number === this.pathList.length) {
          } else {
            this.path += '/' + this.pathList[number].folder
          }
        })
        let queryFolder = localStorage.getItem(this.path)
        if (!unPushLink) {
          if (!this.$route.query.path) {
            this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURI(this.path)}${queryFolder ? '&folder='+queryFolder : ''}`)
          } else {
            this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURI(this.path)}${queryFolder ? '&folder='+queryFolder : ''}`)
          }
        }
        if (!unRefresh) {
          this.pagination.pageIndex = 1
          this.getFileList()
        }
      }
    },
    // 格式化最近时间
    formatTime(time) {
      return formatTime(time)
    },
    // 格式化文件大小
    formatSize(size) {
      return formatSize(size)
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getFileList();
    },
    getFileList(onLoad) {
      this.beforeLoadData(onLoad)
      api.fileList({
        username: this.$store.state.user.name,
        userId: this.$store.state.user.userId,
        currentDirectory: encodeURI(this.$route.query.path),
        folder: this.$route.query.folder,
        queryFileType: this.queryFileType,
        sortableProp: this.sortableProp,
        order: this.order,
        isFolder: this.queryCondition.isFolder,
        isFavorite: this.queryCondition.isFavorite,
        queryCondition: this.queryCondition,
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize,
      }).then(res => {
        this.loadData(res, onLoad)
      }).catch(e => {
      })
    },
    searchFile(key, onLoad) {
      if (key) {
        this.beforeLoadData(onLoad)
        this.$router.push(`?vmode=${this.vmode}&search-file=${key}`)
        api.searchFile({
          userId: this.$store.state.user.userId,
          username: this.$store.state.user.name,
          keyword: key,
          currentDirectory: encodeURI(this.$route.query.path),
          pageIndex: this.pagination.pageIndex,
          pageSize: this.pagination.pageSize
        }).then(res => {
          this.loadData(res, onLoad)
          this.path = ''
          this.listModeSearch = true
          this.listModeSearchOpenDir = false
        })
      }
    },
    // 请求之前的准备
    beforeLoadData(onLoad) {
      if (onLoad) {
        this.pagination.pageIndex++
      } else {
        this.pagination.pageIndex = 1
      }
      this.finished = false;
      this.fileList = []
    },
    // 填充数据
    loadData(res, onLoad) {
      if (onLoad) {
        res.data.forEach((file, index) => {
          file['index'] = (this.pagination.pageIndex - 1) * this.pagination.pageSize + index
          this.fileList.push(file)
        })
      } else {
        this.fileList = res.data
        this.fileList.map((file, index) => {
          file['index'] = index
        })
      }
      this.refreshing = false
      this.resultCount = res.count
      // 数据全部加载完成
      if (this.fileList.length >= res.count) {
        this.finished = true;
      }
      // 排序
      this.fileList.sort(this.compare(this.sortableProp))
      this.$nextTick(() => {
        this.containerResize()
        // 加载状态结束
        this.loading = false
      })
    },
    containerResize() {
      const container = document.querySelector(".container")
      let clientWidth = container.clientWidth
      if (clientWidth > 1024) {
        this.gridColumnNum = Math.round(clientWidth / 100 - 4)
      } else {
        this.gridColumnNum = Math.round(clientWidth / 100 - 2)
        if (clientWidth <= 550) {
          this.gridColumnNum = 4
        }
        if (clientWidth <= 375) {
          this.gridColumnNum = 3
        }
      }
    },
    clickFileType(queryFileType, queryCondition) {
      this.queryCondition = queryCondition
      this.queryFileType = queryFileType
      this.getFileList()
      this.leftMenuShow = false
    },
    uploadList() {
      this.$router.push(`/upload/index_m`)
    },
    // 统计
    statistics() {
      let totalSize = 0
      this.fileList.forEach(file => {
        totalSize += file.size;
      })
      return this.getShowSumFileAndFolder(this.fileList) + ' ' + this.getShowSumSize(totalSize)
    },
    // 统计文件和文件夹
    getShowSumFileAndFolder(fileList) {
      let folderSize = 0
      let fileSize = 0
      fileList.forEach((fileInfo) => {
        if (fileInfo.isFolder) {
          folderSize += 1
        } else {
          fileSize += 1
        }
      })
      let folderSum = ''
      if (folderSize > 0) {
        folderSum = folderSize + '个文件夹'
      }
      let fileSum = ''
      if (fileSize > 0) {
        fileSum = fileSize + '个文件'
      }
      return folderSum + ' ' + fileSum
    },
    // 计算总大小
    getShowSumSize(totalSize) {
      let sizeSum = ''
      if (totalSize > 0) {
        sizeSum = '  共'
      }
      if (totalSize === 0) {
        return sizeSum
      } else if (totalSize < 1024) {
        sizeSum += totalSize + 'B'
      } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
        sizeSum += (totalSize / 1024).toFixed(2) + 'K'
      } else if (totalSize >= 1024 * 1024 && totalSize < 1024 * 1024 * 1024) {
        sizeSum += (totalSize / (1024 * 1024)).toFixed(2) + 'M'
      } else {
        sizeSum += (totalSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
      }
      return sizeSum
    },
    // 全选或反选
    checkboxAll() {
      if (this.selectRowData.length !== this.fileList.length) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    // 取消选择状态
    cancelSelect() {
      this.$refs.checkboxGroup.toggleAll(false)
      const that = this
      setTimeout(function () {
        that.selectStatus = false
      })
    },
    // 选择状态改变时触发
    checkboxChange(any) {
      this.selectRowData = any
      this.selectIndexList = []
      for (const item of any) {
        this.selectIndexList.push(item.index)
      }
      this.selectStatus = true
    },
    // 点击文件或文件夹
    fileClick(row, index) {
      if (this.selectStatus) {
        this.$refs.checkboxes[index].toggle();
      } else {
        if (row.isFolder) {
          // 打开文件夹
          if (this.path) {
            this.path += '/' + row.name
          } else {
            this.path = '/' + row.name
          }
          const item = {}
          item['folder'] = row.name
          item['index'] = this.pathList.length - 1
          this.pathList.push(item)
          const path = encodeURI(this.path);
          if (this.$store.getters.userId !== row.userId) {
            row.mountFileId = row.id
          }
          if (row.mountFileId) {
            localStorage.setItem(this.path, row.mountFileId)
          }
          this.$router.push(`/_m?vmode=${this.vmode}&path=${path}${row.mountFileId ? '&folder='+row.mountFileId : ''}`)
          this.getFileList()
        } else {
          if (row.contentType.startsWith('image')) {
            // 图片
            this.imagePreviewVisible = true
            this.imagePreviewRow = row
            return
          }
          if (suffix.simText.includes(row.suffix)) {
            // 文本文件
            this.textPreviewRow = row
            this.textPreviewVisible = true
            return
          }
          if (row.contentType.indexOf('video') > -1) {
            // 视频文件
            this.videoPreviewVisible = true
            this.videoPreviewRow = row
            return
          }
          if (row.contentType.indexOf('audio') > -1) {
            // 音频文件
            this.$store.dispatch('updateMessage', { event: 'onAddAudio', data: { row: row, audioCoverUrl: this.audioCoverUrl } })
            return
          }
          if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
            // office文件
            this.officePreviewVisible = true
            this.officePreviewRow = row
            return
          }
          if (row.suffix === 'pdf') {
            // pdf文件
            fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
            return
          }
          vant.Dialog.confirm({
            title: '标题',
            message: '此文件不支持预览，是否下载',
            confirmButtonText: '下载'
          }).then(() => {
            // 通用下载文件的方法
            setTimeout(() => {
              fileConfig.download(this.$store.state.user.name, row, this.$store.state.user.token)
            }, 0)
          }).catch(() => {
              // on cancel
          });
        }
      }
    },
    onCancel() {
      this.actionSheetShow = false
      this.actionSortSheetShow = false
    },
    compare(property) {
      return (a, b) => {
        let value1 = a[property]
        let value2 = b[property]
        if (this.order === 'ascending') {
          return value1 - value2
        } else {
          return value2 - value1
        }
      }
    },
    selectSortActionsMenus(action) {
      const that = this
      setTimeout(function () {
        that.actionSortSheetShow = false
      }, 100)
      if (this.sortOrder === 'up') {
        this.sortOrder = 'down'
        this.order = 'descending'
      } else {
        this.sortOrder = 'up'
        this.order = 'ascending'
      }
      this.actionsSortName = action.name
      if (action.name === '名称') {
        this.sortableProp = 'name'
        if (this.sortOrder === 'up') {
          this.order = null
        }
        this.getFileList()
      }
      if (action.name === '大小') {
        this.sortableProp = 'size'
        this.fileList.sort(this.compare(this.sortableProp))
      }
      if (action.name === '日期') {
        this.sortableProp = 'updateDate'
        this.getFileList()
        // this.fileList.sort(this.compare('agoTime'))
      }
    },
    // 选择上传文件菜单
    selectActionsMenus(action) {
      const that = this
      setTimeout(function () {
        that.actionSheetShow = false
      }, 100)
      // 新建文件夹
      if (action.name === '新建文件夹') {
        this.newFolderName = '新建文件夹'
        let append = 0
        let filenameList = []
        this.fileList.forEach(file => {
          filenameList.push(file.name)
        })
        while (filenameList.includes(this.newFolderName)) {
          append += 1
          this.newFolderName = '新建文件夹' + append
        }
        this.showNewFolder = true
        const that = this
        setTimeout(function () {
          that.$refs.newFolderInput.focus()
        }, 0)
      }
      // 上传文件
      if (action.name === '上传文件') {
        // 打开文件选择框
        this.$store.dispatch('updateMessage', { event: 'openUploader', data: {
            // 传入的参数
            folder: this.$route.query.folder,
            currentDirectory: encodeURI(this.path),
            username: this.$store.state.user.name,
            userId: this.$store.state.user.userId
          }})
      }
      // 上传文件夹
      if (action.name === '上传文件夹') {
        // 打开文件夹选择框
        this.$store.dispatch('updateMessage', { event: 'uploadFolder', data: {
            // 传入的参数
            folder: this.$route.query.folder,
            currentDirectory: encodeURI(this.path),
            username: this.$store.state.user.name,
            userId: this.$store.state.user.userId
          }})
      }
    },
    // 新建文件夹
    newFolderNameClick() {
      this.newFolderLoading = true
      if (this.newFolderName) {
        api.uploadFolder({
          isFolder: true,
          filename: encodeURI(this.newFolderName),
          folder: this.$route.query.folder,
          currentDirectory: encodeURI(this.path),
          username: this.$store.state.user.name,
          userId: this.$store.state.user.userId
        }).then((res) => {
          if (res.data === 1) {
            this.newFolderLoading = false
            this.$message({
              message: '该文件夹已存在',
              type: 'warning'
            });
          } else {
            this.newFolderLoading = false
            this.showNewFolder = false
            this.isShowNewFolder = false
            Notify({type: 'success', message: '新建文件夹成功', duration: 1000});
            if (this.listModeSearch) {
              this.getFileListBySearchMode()
            } else {
              this.getFileList()
            }
          }
        })
      } else {
        this.newFolderLoading = false
        this.$message({
          message: '请输入文件夹名称',
          type: 'warning'
        });
      }
    },
    swipeUp() {
      this.test = 10
    },
    tabBottom() {
      return {padding: '0 0 20px 0'}
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}

input {
  -webkit-user-select: auto; /*webkit浏览器*/
}

.tab-bottom {
  padding: 0 0 25px 0;

  .van-tabbar-item {
    margin-top: 25px;
    animation: ordinary .4s forwards;
    -moz-animation: ordinary .4s forwards; /* Firefox */
    -webkit-animation: ordinary .4s forwards; /* Safari and Chrome */
    -o-animation: ordinary .4s forwards; /* Opera */
  }
}

@keyframes iphoneX {
  from {
    margin-top: 25px;
  }
  to {
    margin-top: -5px;
  }
}

@keyframes ordinary {
  from {
    margin-top: -5px;
  }
  to {
    margin-top: 25px;
  }
}

.tab-bottom-iphoneX {
  padding: 0 0 25px 0;

  .van-tabbar-item {
    animation: iphoneX .4s forwards;
    -moz-animation: iphoneX .4s forwards; /* Firefox */
    -webkit-animation: iphoneX .4s forwards; /* Safari and Chrome */
    -o-animation: iphoneX .5s forwards; /* Opera */
  }
}

.tab-bottom-iphoneXS {
  padding: 0 0 25px 0;

  .van-tabbar-item {
    animation: iphoneX .4s forwards;
    -moz-animation: iphoneX .4s forwards; /* Firefox */
    -webkit-animation: iphoneX .4s forwards; /* Safari and Chrome */
    -o-animation: iphoneX .4s forwards; /* Opera */
  }
}

.van-tabbar-item {
  color: #646566;
  text-align: center;
  margin-top: 20px;
  font-size: 10px;

  .tab-text {
    margin-top: 2px;
  }
}

.container {
  font-size: 14px;

  .classification {
    padding: 1rem 0 1rem 0;
    background: wheat;
  }

}

>>> .block {
  .audio-player-close {
    width: 1em;
    height: 1em;
  }
}

/*.van-divider {*/
/*margin: 5px 15px 0px 15px;*/
/*}*/
.file-description {
  color: #646566;
  font-size: 12px;
}

.van-col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-item {
  padding: 5px 10px;

  .list-cell-icon {
    font-size: 18px;
  }

  .list-item-content {
    margin-left: 5px;
  }

  >>> .svg-icon {
    width: 2.5em;
    height: 2.5em;
  }
}

.overlay-content-class {
  -webkit-transition: all .1s ease-in-out 0s;
  transition: all .1s ease-in-out 0s;
  box-shadow: 2px 3px 3px #888888;

}

.list-item:active {
  background-color: #bfcbd930;
}

>>> .van-sticky {
  background: inherit;
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.25);
}

[class*=van-hairline]::after {
  border: 0 solid rgba(255, 255, 255, 0.72);
}

>>> .van-sticky--fixed {
  z-index: 1;
}

.van-nav-bar {
  /*height: 59px;*/
  /*line-height: 59px;*/
  background-color: unset;
  -webkit-transition: all .15s ease-in-out 0s;
  transition: all .15s ease-in-out 0s;
  /*position: relative;*/
  /*box-shadow: 4px 0 2px rgba(0,0,0,0.5);*/
}

.van-nav-bar::after {
  /*background: inherit;*/
  /*!*-webkit-filter: blur(15px);*!*/
  /*!*filter: blur(20px);*!*/
  /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
  /*backdrop-filter: saturate(180%) blur(20px);*/
  /*background-color: rgba(255,255,255,0.72);*/
}

.van-overlay {
  -webkit-backdrop-filter: saturate(180%) blur(1.5px);
  backdrop-filter: saturate(180%) blur(1.5px);
  background-color: rgba(0, 0, 0, .7);
}

.van-nav-bar__title {
  width: 30%;
  position: absolute;
  margin-left: 35%;
  z-index: 11;
}

.van-nav-bar__left {
  //  max-width: 30%;
  z-index: 11;

  .van-icon-arrow-left {
    font-size: 24px;
  }
}

/*.van-nav-bar__left:active {*/
/*background-color: #f8f8f8;*/
/*!*background-color: hsl(0, 94%, 47%);*!*/
/*}*/
.van-nav-bar__right {
  z-index: 11;
}

.van-nav-bar__arrow + .van-nav-bar__text {
  max-width: 7.5rem;
  min-width: 5.5rem;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.new-folder-input >>> .van-field__body {
  height: 40px;
}

.newFileMenu ul {
  list-style: none;
  padding-inline-start: 0px;
  margin-top: 0;
  margin-bottom: 0;
}

.newFileMenu {
  color: #000000db;
  background-color: #efefef;
  padding: 1px 0;
}

>>> .menu-background::after {
  background: inherit;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.72);
}

.newFileMenu li {
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-size: 1em;
  min-width: 136px;
  height: 3em;
}

.newFileMenu .remove {
  color: rgba(255, 0, 0, 0.8);
}

.newFileMenu .menu-list-first li:active {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: #E1E1E1;
}

.newFileMenu .menu-list li:active {
  background-color: #E1E1E1;
}

.newFileMenu .menu-list-last li:active {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  background-color: #E1E1E1;
}

/*.newFileMenu li:active {*/
/*cursor: pointer;*/
/*border-radius: 1rem;*/
/*background-color: #cccccc;*/
/*}*/

.newFileMenu li .menuitem {
  cursor: pointer;
  line-height: 3em;;
  margin-left: 10%;
}

.newFileMenu li .menuitem .text {
  cursor: pointer;
  margin-left: 10%;
  font-weight: normal;
}

.newFileMenu li .menuitem .svg-icon {
  width: 1rem;
  height: 1rem;
}

>>> .ctx-menu-container {
  top: unset;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 1rem;
  -webkit-box-shadow: 0 0 0 #ccc;
  box-shadow: 0 0 0 #ccc;
}

.header-button {
  margin: 0 -16px;
  padding: 0 16px;
}

.header-button-icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}

.header-button:active {
  background-color: #f2f3f5;
}

.left-menu {
  padding: 1rem 0 0 0;
  height: 100%;
  width: 100%;
  text-align: center;
}

.logout {
  padding: 1rem 0 0 0;
}

.classification {
  padding: 1rem 0 0 0;

  >>> .van-cell:active {
    background-color: #f8f8f8;
  }
}

.searchbar {
  height: 48px;
  background-color: unset;
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s;
  /*background: inherit;*/
  /*background-color: #fff;*/
  /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
  /*backdrop-filter: saturate(180%) blur(20px);*/
  /*background-color: rgba(255,255,255,0.72);*/
}

/*.searchbar::after{*/
/*background: inherit;*/
/*background-color: #fff;*/
/*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
/*backdrop-filter: saturate(180%) blur(20px);*/
/*background-color: rgba(255,255,255,0.72);*/
/*}*/
.van-search {
  padding: 0 12px;
}

.van-search__action {
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s;
  margin-right: -44px;
  visibility: hidden;
}

.search-result {
  font-weight: 600;
  font-size: 20px;
}

.search-result-no {
  height: 80px;
  line-height: 80px;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

.operating-header {
  .operating-header-col {
    height: 28px;
    color: #1989fa;

    .sortable {
      font-size: 14px !important;
    }

    .van-icon {
      line-height: 28px;
      font-size: 20px;
      color: #1989fa;
    }
  }

  .operating-header-col:active {
    color: #C2CCD1;

    .van-icon {
      color: #C2CCD1;
    }
  }
}

>>> .grid-item-text {
  text-align: center;
  color: #606266;
  font-size: smaller;
  word-wrap: break-word;
  width: -webkit-fill-available;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

>>> .van-grid-item__content {
  padding: 0px;

  .grid-item-icon {
    svg {
      width: 4rem;
      height: 4rem;
    }

    .favorite.svg-icon {
      width: 1.5rem !important;
      height: 1.5rem !important;
      margin: 15px 10px;
    }

    .el-image {
      width: 4rem !important;
      height: 4rem !important;
    }
  }
}
.file-item-checkbox {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}
</style>
